<script>
import { Message } from 'element-ui'
import * as echarts from 'echarts'
import Top from '../top/index.vue'
import { normality } from '@/api/grades'

export default {
  name: 'Normality',
  components: {
    Top
  },
  data() {
    return {
      // 是否可见
      isVisible: false,
      // 表格数据 [{possibility: 0.06,info: '数据 1'}]
      tableData: [],
      // 成绩图表
      scoreChart: null
    }
  },
  mounted() {
    this.scoreChart = echarts.init(this.$refs.chartRef)
  },
  methods: {
    // 数据准备。获取数据的范围，作为X轴的数据。统计次数，作为Y轴数据
    getData(data) {
      let min = data[0]
      let length = 0
      data.forEach((item) => {
        min = Math.floor(item < min ? item : min)
      })
      min = 10 * Math.floor(min / 10)

      length = (100 - min) / 10
      const xData = Array.from({ length: length }, () => 0)
      for (let i = 0; i < length; i++) {
        xData[i] = min + i * 10
      }
      const yData = Array.from({ length: length }, () => 0)
      data.forEach(item => yData[Math.floor((item - min) / 10)]++)
      return [xData, yData]
    },
    // 成绩图表
    drawScoreChart(dataList) {
      // 数据准备
      const scoreRet = this.getData(dataList[0])
      const totalScoreRet = this.getData(dataList[1])
      const xData = [...new Set([...scoreRet[0], ...totalScoreRet[0]])]
      const option = {
        title: {
          text: '成绩分布图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['期末成绩', '综合成绩']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '期末成绩',
            type: 'line',
            smooth: true,
            data: scoreRet[1]
          },
          {
            name: '综合成绩',
            type: 'line',
            smooth: true,
            data: totalScoreRet[1]
          }
        ]
      }
      option && this.scoreChart.setOption(option)
    },
    // 清空数据
    clear() {
      this.dataList = []
      this.tableData = []
    },
    // 从子组件中获取 是否展示的数据
    isShow(isVisible) {
      this.isVisible = isVisible
    },
    // 接收信号（分析）
    signal(param) {
      normality(param.courseId, param.teacherId, param.semester).then(res => {
        console.log('res = ', res)
        const data = res.data
        // 没有数据直接结束
        if (data === null) {
          // 隐藏
          this.isVisible = false
          Message({
            message: '没有相关数据',
            type: 'warning',
            duration: 2000
          })
          return
        }
        this.isVisible = true
        this.clear()
        // 处理数据，获取行数据和图表的数据。toFixed()后是string类型
        const dataList = [] // 图表数据
        for (const item of data) {
          const temp = {}
          if (item.statistic === 0) {
            continue
          }
          temp.statistic = item.statistic.toFixed(2)
          temp.possibility = item.possibility.toFixed(6)
          temp.info = item.info
          item.itemList.forEach(element => {
            temp.mean = element.mean.toFixed(2)
            temp.std = element.std.toFixed(2)
            temp.num = element.num
            dataList.push(element.data)
          })
          this.tableData.push(temp)
        }
        console.log('tableData = ', this.tableData)
        this.drawScoreChart(dataList)
      })
    }
  }
}

</script>

<template>
  <div class="container">
    <Top :show="isShow" :signal="signal" :quantileShow="false" />

    <div v-show="isVisible" class="main">
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="info" label="名称" header-align="center" align="center" />
        <el-table-column prop="num" label="样本量" header-align="center" align="center" />
        <el-table-column prop="mean" label="均值" width="180" header-align="center" align="center" />
        <el-table-column prop="std" label="标准差" header-align="center" align="center" />
        <el-table-column prop="statistic" label="统计量（D值）" header-align="center" align="center" />
        <el-table-column prop="possibility" label="P值" header-align="center" align="center" />
      </el-table>
      <!-- 文本 -->
      <div class="text">
        <h3>说明<i class="el-icon-info" style="margin-left: 10px;" /></h3>
        正态性检验研究定量数据分析是否具有正态分布特质
        <br>
        第一：判断统计值是否呈现出显著性(p值小于0.05)
        <br>
        第二：如果呈现出显著性，则说明该项不具有正态分布特质
        <br>
        第三：如果没有呈现出显著性（p>0.05），说明该项具有正态分布特质
        <br><br>
        <p>
          从上表可以看出，
          <span v-if="tableData.length">
            <span v-for="(item, idx) in tableData" :key="idx">
              <span v-show="item.possibility < 0.05">
                由于{{ item.possibility }} &lt; 0.05，对于{{ item.info }}而言，不具有正态性特质。
              </span>
              <span v-show="item.possibility >= 0.05">
                由于{{ item.possibility }} &gt; 0.05，对于{{ item.info }}而言，具备正态性特质。
              </span>
            </span>
          </span>
        </p>
      </div>
      <!-- 图表 -->
      <div class="chart-box">
        <div ref="chartRef" class="chart" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  padding: 30px;

  .main {
    margin-top: 30px;

    .text {
      margin: 30px 0 30px;
      background-color: #F3F9FE;
      padding: 10px;
    }

    .chart-box {
      display: flex;
      justify-content: space-between;

      .chart {
        margin: 0 auto;
        width: 800px;
        height: 600px;
      }
    }
  }
}
</style>
